<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年12月20日 15:10:18
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="orderPage">
    <!-- 头部 -->
    <div class="header">
      <span>订单状态</span>
      <!-- {{curStatus}} -->
      <el-select v-model="curStatus" clearable placeholder="请选择">
        <!-- {{curStatus}} -->
        <el-option
          v-for="item in orderStatus"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-button icon="el-icon-search" @click="searchOrder()">查询</el-button>

      <span style="margin-left: 100px">订单编号</span>
      <el-input
        v-model="inputId"
        placeholder="请输入订单编号"
        clearable
        style="width: 220px"
      />
      <el-button icon="el-icon-search" @click="searchOrder()">搜索</el-button>
    </div>
    <!-- 订单表格 -->
    <div class="orderTable">
      <el-table
        v-loading="loading"
        :data="orders.list"
        style="width: 180%"
        :show-header="false"
      >
        <el-table-column prop="id" label="" width="200">
          <template slot-scope="scope" style="color: #000000">
            下单时间：{{ scope.row.orderTime }}<br />
            订单编号：{{ scope.row.id }}<br />
            <el-button type="primary" @click="getOrderMsgById(scope.row.id)"
              >订单详情
            </el-button>
            <router-view></router-view>
            <!-- <el-dialog title="收货地址" :visible.sync="dialog">
              {{curRowId}}
            </el-dialog> -->
            <br />
            订单状态：{{ scope.row.status }}<br />
            总金额：￥<span style="color: red; font-size: 18px">{{
              scope.row.total
            }}</span>
            / 元<br />
            <el-button
              v-if="scope.row.status == '待派送'"
              type="text"
              @click="toDelivery(scope.row.id)"
              >开始派送
            </el-button>
          </template>
        </el-table-column>
        <!-- 菜品部分信息 -->
        <el-table-column prop="id" label="">
          <template slot-scope="scope">
            <el-table
              :data="scope.row.orderLines"
              style="width: 100%"
              :show-header="false"
            >
              <el-table-column prop="photo" width="180">
                <!-- {{scope.row.orderLines.photo}} -->
                <template slot-scope="scope">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.product.photo"
                    :preview-src-list="[scope.row.product.photo]"
                    @load="imgFinish"
                  >
                    <!-- 图片未加载时的占位图 -->
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="name" width="180" />
              <el-table-column prop="product.description" />
            </el-table>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->

    <div class="pagination">
      <div class="block">
        <el-pagination
          :current-page.sync="curPage"
          :page-sizes="[2, 3, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="orders.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { get, post } from "@/utils/request";
export default {
  // 组件名称
  name: "Demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      inputId: "",
      curStatus: "待派送",
      orderStatus: ["待派送", "已完成","待支付","全部"],
      changeStatus: "已完成",
      curPage: 1,
      pageSize: 5,
      curRowId: "",
      direction: "rtl",
      loading: false,
      dialog: false,
      isDestroy: false,
    };
  },
  // 计算属性
  computed: {
    ...mapState("order", ["orders", "findByIdOrderMsg"]),
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    ...mapActions("order", ["getOrders", "getFindByIdOrderMsg", "getProducts"]),
    getOrdersData() {
      const params = {
        page: this.curPage,
        pageSize: this.pageSize,
       
        id: this.inputId,
      };
      if(this.curStatus != '全部')
         params.status =  this.curStatus
      this.getOrders(params);
    },

    getFindByIdOrderData() {
      const params = {
        id: this.curRowId,
      };
      this.getFindByIdOrderMsg(params);
    },

    searchOrder() {
      this.curPage = 1;
      this.getOrdersData();
    },

    getOrderMsgById(id) {
      this.$router.push({
        path:"/order/order/OrderDetails",
        query:{
          orderId: id,
        }
      });
      // this.curRowId = id;
      // this.getFindByIdOrderData();
      // this.dialog = true;
      // this.isDestroy = true;
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.dialog = false;
          done();
        })
        .catch((_) => {});
    },

    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getOrdersData();
    },

    handleCurrentChange(curPage) {
      this.curPage = curPage;
      this.getOrdersData();
    },

    imgFinish() {
      this.loading = false;
    },

    toDelivery(orderId) {
      get("/order/delivery", {
        id: orderId,
      }).then((res) => {
        // console.log(res);
        if (res.message == "派送完成") {
          this.$message({
            message: res.message,
            type: "success",
          });
          // 派送完成 刷新页面的数据
          this.getOrdersData();
          this.loading = false;
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getOrdersData();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style>
.orderPage {
  min-height: calc(100vh - 100px);
}

.orderTable {
  margin-top: 10px;
  max-height: calc(100vh - 180px);
  overflow: auto;
}

.pagination {
  position: fixed;
  right: 15px;
  bottom: 30px;
}
</style>
